/*
    * @module:views/budget/smartCloudy
    * @author:silas
    * @date:2021-02-03
    * 智云护航
*/
<template>
    <div class="compilationSummary">
        <div class="contentTopTitle">
            <div class="fl">
                <div class="title">智云护航</div>
            </div>
        </div>
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="70px"
                class="formList"
            >
                <el-form-item label="区域">
                    <dx-cascader
                        :area_id.sync="form.areaId"
                        :area_name.sync="form.areaName"
                        :area_lvl.sync="form.areaLvl"
                        ref="cascader"
                    />
                </el-form-item>
                <el-form-item label="年月">
                    <el-date-picker
                        v-model="form.year"
                        type="month"
                        placeholder="选择年"
                        value-format="yyyyMM"
                    ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item>
          <el-select v-model="form.month">
            <el-option
              v-for="(it, i) in months"
              :key="i"
              :value="it.value"
              :label="it.label"
            ></el-option>
          </el-select>
        </el-form-item> -->
                <el-form-item>
                    <div class="g-btn-wrapper">
                        <div class="g-cell">
                            <el-button
                                size="small"
                                style="margin-left: 12px"
                                type="primary"
                                @click="search"
                                >查询</el-button
                            >
                            <el-button
                                size="mini"
                                type="orange"
                                @click="handle_export()"
                                >导出</el-button
                            >
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <p class="g-unit">单位: 元</p>
        <div class="table-content clearfix">
            <div class="tableBox">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    height="73vh"
                    stripe
                    :span-method="arraySpanMethod"
                >
                    <el-table-column
                        prop="indexType"
                        label="大类"
                        min-width="130"
                    />
                    <el-table-column
                        prop="indexName"
                        label="产品"
                        min-width="260"
                    />
                    <el-table-column
                        v-for="(it, i) in titles"
                        min-width="120"
                        :label="it"
                        :prop="'indexValue' + i"
                        :key="i"
                    ></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
// import tab3 from "@/views/budget/compilationSummary/compilationSummary-tab3";
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
    name: "smartCloudy",
    components: {
        // tab1,
        // tab2,
        // tab3,
    },
    data() {
        var month = Array.from(new Array(12), (item, value) =>
                value + 1 < 10
                    ? (value = {
                          label: value + 1 + "月",
                          value: "0" + (value + 1),
                      })
                    : (value = {
                          value: value + 1 + "",
                          label: value + 1 + "月",
                      })
            ),
            m = [{ label: "全部", value: "" }, ...month];

        return {
            backRecord: false,
            form: {
                year: "",
                month: "",
                areaId: "",
            },
            months: m,
            accountInfo: "",
            tableData: [],
            tableLoading: false,
            dialogVisible: false,
            titles: [],
            spanArr: "",
        };
    },
    created() {
        var that = this;

        that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        that.form.areaId = that.accountInfo.areaId;
        that.form.year = that.moment().format("yyyyMM");
        this.init();
    },
    // mounted() {
    //   this.init();
    // },
    methods: {
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0 || columnIndex == 1) {
                return this.spanArr && this.spanArr[rowIndex][columnIndex];
            }
        },
        //查询
        search() {
            this.listResourceData();
        },
        errorUpload(err, file, fileList) {
            this.loading.close();
        },
        progress(event, file, fileList) {
            this.loading = this.$loading({
                lock: true,
                text: "正在导入",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
        },
        //导入成功的回调
        importTarget(response, file, fileList) {
            this.alertError(response);
            this.loading.close();
            if (response.code == 0) {
                this.$message({
                    type: "success",
                    message: "导入成功",
                });
                this.form.resourceId = true;
                this.getData(this.flag);
            }
        },
        // 模板下载
        template_download() {
            let token = getCookie("token");
            let year = this.form.year;
            // 根据不同模式切换不同的路径
            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    "/api/releaseReport/downLoadTemplate?testYear=" +
                    year +
                    "&token=" +
                    token;
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    "/api/releaseReport/downLoadTemplate?testYear=" +
                    year +
                    "&token=" +
                    token;
            }
        },
        // 批量导入上传文件传递数据
        changeFile(file, fileList) {
            this.fileList = fileList;
            this.param = new FormData();
            this.param.append("file", file.raw);
        },
        handle_export() {
            let token = getCookie("token"),
                year = this.form.year;

            window.location.href =
                prefixAPI.hp +
                "/api/cloudSmartMon/exportData?acctMonth=" +
                year +
                "&token=" +
                token;
        },
        listResourceData() {
            var that = this;

            that.tableLoading = true;

            $budgetAPI.getSmartCloudy(
                {
                    areaId: that.form.areaId,
                    acctMonth: that.form.year
                },
                (res) => {
                    console.log(res);
                    if (res.code == 0) {
                        res.content.dataList.map((it) => {
                            it.paramMapList.map((item, i) => {
                                it["indexValue" + i] = item.indexValue;
                            });
                        });
                        that.spanArr = mergeSpan(res.content.dataList, [
                            "indexType",
                            "indexName",
                        ]);
                        that.titles = res.content.areaNames;
                        that.tableData = res.content.dataList;
                    }
                    that.tableLoading = false;
                }
            );
        },

        init() {
            let that = this;

            that.listResourceData();
        },
        handleDetail(it) {
            this.$router.push({
                path: "/budget/constructionDetail",
                query: { id: it.id },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.compilationSummary {
    .formList {
        padding-bottom: 20px;
    }
    .g-btn-wrapper {
        display: flex;
        .g-cell {
            flex: 1;
            button {
                padding: 7px 15px;
            }
        }
        .g-btns {
            text-align: right;
        }
    }
    .table-content {
        .table-header {
            display: flex;
            justify-content: space-between;

            .btn-right {
                display: flex;
            }

            .table-title {
                font-size: 14px;
                font-weight: bold;
                height: 30px;
                line-height: 30px;

                span {
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background-color: #418ee9;
                    border-radius: 1000%;
                    overflow: hidden;
                    margin-right: 10px;
                    margin-bottom: 3px;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.compilationSummary {
    .formList {
        .el-form-item {
            width: 22%;
        }
        .el-form-item:last-child {
            width: 32%;
            .el-form-item__content {
                width: 100%;
            }
        }
        .el-form-item.btnBox {
            margin-bottom: 0px;
            width: 18%;
            margin-right: 0;

            .el-form-item__content {
                display: flex;
            }
        }
    }
}
</style>
